<%= javascript_include_tag "validateFileInputs", defer: true %>

<div class="crayons-card crayons-card--content-rows">
  <h2><%= t("views.settings.org.join.heading") %></h2>
  <%= form_tag "/users/join_org" do %>
    <div class="crayons-field mb-6">
      <%= label_tag :org_secret, t("views.settings.org.join.label"), class: "crayons-field__label" %>
      <p class="crayons-field__description"><%= t("views.settings.org.join.desc") %></p>
      <%= text_field_tag :org_secret, nil, placeholder: t("views.settings.org.join.placeholder"), class: "crayons-textfield", autocomplete: "off" %>
    </div>

    <button class="crayons-btn" type="submit"><%= t("views.settings.org.join.submit") %></button>
  <% end %>
</div>

<p class="align-center fs-small color-base-60 mb-6 fw-bold"><%= t("views.settings.org.divider") %></p>

<div class="crayons-card crayons-card--content-rows">
  <header>
    <h2 class="mb-2"><%= t("views.settings.org.create.heading") %></h2>
    <p><%= t("views.settings.org.create.required") %></p>
  </header>

  <%= form_for @organization, html: { class: "grid gap-6" } do |f| %>
    <div class="crayons-field">
      <%= f.label :name, class: "crayons-field__label" do |translation| %>
        <%= translation %>
        <span class="crayons-field__required" title="<%= t("views.settings.org.create.required") %>">*</span>
      <% end %>
      <%= f.text_field :name, class: "crayons-textfield" %>
    </div>
    <div class="crayons-field">
      <%= f.label :slug, class: "crayons-field__label" do |translation| %>
        <%= translation %>
        <span class="crayons-field__required" title="<%= t("views.settings.org.create.required") %>">*</span>
      <% end %>
      <%= f.text_field :slug, class: "crayons-textfield" %>
      <p class="crayons-field__description"><%= t("views.settings.org.create.slug", url: app_url) %></p>
    </div>

    <div class="crayons-field">
      <%= f.label :profile_image, class: "crayons-field__label" do |translation| %>
        <%= translation %>
        <span class="crayons-field__required" title="<%= t("views.settings.org.create.required") %>">*</span>
      <% end %>
      <%= f.file_field :profile_image, accept: "image/*", class: "crayons-card crayons-card--secondary p-3 flex items-center flex-1 w-100" %>
    </div>

    <div class="crayons-field">
      <%= f.label :twitter_username, "Twitter username", class: "crayons-field__label" %>
      <%= f.text_field :twitter_username, class: "crayons-textfield" %>
    </div>

    <div class="crayons-field">
      <%= f.label :github_username, "GitHub username", class: "crayons-field__label" %>
      <%= f.text_field :github_username, class: "crayons-textfield" %>
    </div>

    <%= render partial: "shared/logo_design", locals: { f: f, account: @user } %>

    <div class="crayons-field">
      <%= f.label :url, class: "crayons-field__label" do |translation| %>
        <%= translation %>
      <% end %>
      <%= f.url_field :url, class: "crayons-textfield" %>
    </div>

    <div class="crayons-field">
      <%= f.label :summary, class: "crayons-field__label" do |translation| %>
        <%= translation %>
      <% end %>
      <%= f.text_area :summary, class: "crayons-textfield", rows: 3 %>
    </div>

    <div class="crayons-field">
      <%= f.label :proof, class: "crayons-field__label" do |translation| %>
        <%= translation %>
      <% end %>
      <p class="crayons-field__description"><%= t("views.settings.org.create.proof") %></p>
      <%= f.text_area :proof, class: "crayons-textfield" %>
      <p class="crayons-field__description"><%= t("views.settings.org.create.notice") %></p>
    </div>

    <button class="crayons-btn w-max" type="submit"><%= t("views.settings.org.create.submit") %></button>
  <% end %>
</div>
